<template>
	<view class="m-flow-chart">
		<view v-if="status == 0">
			<u-cell title="流程" :titleStyle="{ fontSize: '14px'}">
			</u-cell>

			<view class="m-flow-chart--content">
				<m-time-line :tableData="approvalProcessList">
					<template #content="{row}">
						<view>
							<view class="flex-box">
								<view class="mark">
									<view class="flex-box">

										<view>
											<view>
												<view>{{row.nodeName}}</view>
											</view>
											<view style="color: #969799;font-size: 13px;margin-top: 4px;">
												<text v-if="row.type == 2">抄送通知</text>
												<text v-if="row.type == 1 && row.node.length == 1">1人审批</text>
												<text
													v-if="row.type == 1 && row.node.length > 1 && row.approvalType == 1">{{getRealNum(row)}}人会签</text>
												<text
													v-if="row.type == 1 && row.node.length > 1 && row.approvalType == 0">{{getRealNum(row)}}人或签</text>
											</view>
										</view>
									</view>

								</view>

								<view class="flex-main ap-r"
									style="overflow:auto !important;white-space: nowrap;display: flex;">
									<view class="x-start" style="padding-bottom: 3px;"
										v-for="(item,itemIndex) in row.node">
										<view class="f-dc" style="min-width: 40px;">
											<view class="img" @click="toggleUserCheck(row,item)">
												<text>{{cutStr(item.name)}}</text>
												<image class="sf" src="/uni_modules/mc-ui/static/image/success.png"
													v-if="!item.unJoin"></image>
											</view>
											<view class="ap-n">{{item.name}}</view>
										</view>
										<view class="symbolIcon"
											v-if="itemIndex != row.node.length - 1 && row.type == 1 && row.approvalType == 1">
											+</view>
										<view class="symbolIcon"
											v-if="itemIndex != row.node.length - 1 && row.type == 2">+
										</view>
										<view class="symbolIcon"
											v-if="itemIndex != row.node.length - 1 && row.type == 1 && row.approvalType == 0">
											/</view>
									</view>

								</view>
							</view>
						</view>
					</template>
				</m-time-line>


			</view>

		</view>


	</view>
</template>

<script>
	import props from './props.js';
	export default {
		name: "m-flow-chart",
		mixins: [props],
		data() {
			return {
				showLoading: false,
				ifConfirm: false,
				showButton: 0,
				isSubmit: false,
				personList: [],
				approvalAgain: false,

				approvalActions: [],
				selectApprovalData: '',
				approvalList: [],
				approvalProcessList: [],
				status: -1,
				creater: '',
				createTime: '',
				approvalID: 0,
				approveStr: '',
				level: 0,
				finalResult: 0,
				form: {
					id: 0,
					EmplName: '',
					C_Date: '',
					C_VarA: '',
					B_Date: '',
					C_VarE: '',
					C_VarB: '',
					C_Why: ''
				},
				editRemark: true
			};
		},
		created() {
			let that = this;
			uni.$m.utils.showLoading();
			// setTimeout(function() {
			that.getApprovalProcess(0);
			// }, 500);
		},
		methods: {
			getApprovalProcess(id) {
				let that = this;
				const recursionFunc = function(data) {
					var approvalProcessList = [];
					var repeatConfig = function(x, row) {
						var processData = {
							type: row.type,
							approvalType: row.examineMode == 1 ? 0 : 1,
							nodeName: row.nodeName,
							node: [],
							checked: true,
							data: row
						}
						if (row.settype == 7) {
							processData.node.push({
								name: row.examineEndDirectorLevel + '级主管'
							})
						} else {
							processData.node = row.nodeUserList;
						}
						approvalProcessList.push(processData)
						if (row.childNode) {
							repeatConfig(x + 1, row.childNode);
						}
					}
					if (data && data.nodeConfig) {
						data.nodeConfig.childNode && repeatConfig(0, data.nodeConfig.childNode);
					}
					return approvalProcessList;
				}



				//如果id=0，是发起审批状态
				if (id == 0) {
					that.status = 0;
					that.approvalProcessList = [];
					let approvalConfigdata = uni.$m.utils.deepClone(this.option);
					console.log(approvalConfigdata);
					let approvalProcessList = recursionFunc(approvalConfigdata);
					let newApprovalProcessList = [];
					if (that.approveStr) {
						newApprovalProcessList = recursionFunc(JSON.parse(that.approveStr));
					}

					for (var i in approvalProcessList) {
						var w = 0;
						for (var j in newApprovalProcessList) {
							if (approvalProcessList[i].nodeName == newApprovalProcessList[j].nodeName) {
								w = 1
								approvalProcessList[i].checked = true;

								for (var m in approvalProcessList[i].node) {
									var v = 0;
									for (var n in newApprovalProcessList[j].node) {
										if (approvalProcessList[i].node[m].name == newApprovalProcessList[j].node[n]
											.name) {
											v = 1;
											approvalProcessList[i].node[m].unJoin = false;
										}
									}
									if (!v) {
										approvalProcessList[i].node[m].unJoin = true;
									}
								}

							}
						}
						if (!w) {
							if (newApprovalProcessList.length) {
								approvalProcessList[i].checked = false;
							} else {
								for (var m in approvalProcessList[i].node) {
									approvalProcessList[i].node[m].unJoin = true;
								}
							}


						}
					}
					that.approvalProcessList = JSON.parse(JSON.stringify(approvalProcessList));

					uni.$m.utils.hideLoading();
					that.$forceUpdate();

				}

			},
			getBMName(id) {
				var that = this;
				var str = '';
				for (var i in bmlist) {
					if (bmlist[i].ClassID == id) {
						str = bmlist[i].ClassName;
						break;
					}
				}
				return str;
			},
			getZWName(id) {
				var that = this;
				var str = '';
				for (var i in zwlist) {
					if (zwlist[i].JobsID == id) {
						str = zwlist[i].JobName;
						break;
					}
				}
				return str;
			},
			getFormatDate(date) {
				var that = this;
				return APP.getFormatDate1('yyyy-MM-dd hh:mm:ss', new Date(date));
			},
			toggleArrow(str) {
				var that = this;
				that[str] = !that[str];
			},
			getRealNum: function(row) {
				var that = this;
				var t = 0;
				for (var i in row.node) {
					if (!row.node[i].unJoin) {
						t++;
					}
				}
				return t;
			},
			toggleUserCheck: function(row, item) {
				var that = this;
				if (typeof item.unJoin === 'undefined') {
					that.$set(item, 'unJoin', true);
					var x = 1;
					for (var i in row.node) {
						if (!row.node[i].unJoin) {
							x = 0;
						}
					}
					if (x == 1) {
						uni.$m.utils.msg('请至少选择一人')
						that.$set(item, 'unJoin', false);
					}
				} else {
					that.$set(item, 'unJoin', !item.unJoin);
					// item.unJoin = !item.unJoin;
					// alert(item.unJoin)
					var x = 1;
					for (var i in row.node) {
						if (!row.node[i].unJoin) {
							x = 0;
						}
					}
					if (x == 1) {
						uni.$m.utils.msg('请至少选择一人')

						item.unJoin = !item.unJoin;
					}

				}
			},
			showMore: function(row) {
				var that = this;
				if (row.showMore) {
					that.$set(row, 'showMore', false);
				} else {
					that.$set(row, 'showMore', true);
				}

			},
			cutStr: function(str) {
				return str && str.substring(str.length - 2);
			},
			previewItemImage: function(imgs, index) {
				var that = this;
				var array = imgs.split(',');

				// ImagePreview({
				// 	images: array,
				// 	startPosition: index,
				// });
			},
		}
	}
</script>

<style lang="scss">
	@import url("./static/flowChart.scss");

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	/* flex相关 */
	.x-f {
		display: -webkit-flex;
		display: flex;
	}

	.m-flow-chart {
		height: 100%;

		.m-flow-chart--content {
			width: 100%;
			height: 100%;
			padding: 16px 0;

			.m-flow-chart--content-card {
				border-bottom: 1px solid #f7f7f7;


			}
		}
	}

	.symbolIcon {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: start;
		margin: 0 6px;
		color: #969799;
		padding-top: 7px;
	}

	.timeline {
		box-sizing: border-box;
		color: rgba(0, 0, 0, .85);
		font-size: 12px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		font-feature-settings: "tnum", "tnum";
		margin: 0;
		padding: 0;
		list-style: none;
		margin-top: 10px;
		padding: 17px 15px;
	}

	.timeline-item {
		position: relative;
		margin: 0;
		padding-bottom: 10px;
		font-size: 12px;
		list-style: none;
	}

	.timeline-item-tail {
		position: absolute;
		top: 10px;
		// top: 50%;
		// transform: translateY(10px);
		left: 4px;
		height: calc(100% - 10px);
		// height: 100%;
		border-left: 2px solid #f0f0f0;
	}

	.timeline-item-head {
		position: absolute;
		// top: 50%;
		// transform: translateY(10px);
		width: 10px;
		height: 10px;
		background-color: #fff;
		border: 2px solid transparent;
		border-radius: 100px;
	}

	.timeline-item-head-blue {
		color: #02b980;
		border-color: #02b980;
	}

	.timeline-item-content {
		position: relative;
		top: -20.858px;
		margin: 0 0 0 10px;
		word-break: break-word;
		padding-bottom: 10px;
		border-bottom: 1px solid #f7f7f7;
	}
</style>